import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin';
import './style.less'
//fetch获取列表数据
import {getListData} from '../../../fetch/home/home.js';
import ListCompoent from '../../../components/List';
import LoadMore from '../../../components/LoadMore/index.jsx'
class Lists  extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state={
        	ListData:[], //存储请求的列表数据
            hasMore:false,//当前状态下是否还有更多
            isLoadingMore:false,//当前状态下是“加载中..”还是点击加载更多
            page:1//下一页的数据
        }
        this.loadMoreData  = this.loadMoreData.bind(this)
    }
    render() {
        let {cityName} = this.props;
        let {loadMoreData} = this;
        let {isLoadingMore,page,hasMore} = this.state
        return (
        	<div>
        		<h1 className="home-list-title">猜你喜欢
                    {cityName}
                </h1>
                {
                    this.state.ListData.length ? 
                    <ListCompoent 
                        {...{
                            ListData:this.state.ListData
                        }}
                    /> : <div>不好意思暂时没有数据</div>
                }
                {
                    this.state.hasMore ? 
                        <LoadMore
                            {...{
                                loadMoreFn:loadMoreData,
                                isLoadingMore:isLoadingMore,
                                page:page,
                                hasMore:hasMore
                            }}
                        /> 
                    :<div>没有更多</div>
                }
                
        	</div>
        )
    }
    componentDidMount() {
        //获取首页数据
        this.loadFirstPageData()
    }
    //获取首屏数据(0页)
    loadFirstPageData(){
        const cityName = this.props.cityName;
        //请求数据
        var result = getListData(cityName,1);
        //数据处理
        this.resultHandle(result)
        //console.log(result) Promise对象
    };
    //数据处理
    resultHandle(result){
        result.then((res)=>{
            return res.json()
        }).then((json)=>{
            //console.log(json)
            //返回{data:[{}..],hasMore:true(是否还有更多)}
            let ListData = json.data;
            let hasMore = json.hasMore;
            //存储
            this.setState({
                //几次加载的数据拼接起来
                ListData:this.state.ListData.concat(ListData),
                hasMore:hasMore,
            });
            //console.log(this.state)
        })
    }
    //加载更多数据
    loadMoreData() {
        //把当前状态改为“加载中”
        this.setState({
            isLoadingMore:true 
        });
        const cityName = this.props.cityName;
        let {page} = this.state
        //请求数据
        var result = getListData(cityName,page);
        //数据处理
        this.resultHandle(result)
        //更改下一页为第二页
        this.setState({
            page: page+1,
            isLoadingMore:false
        });
        //console.log(this.state)
    }
}
// 使用 require.ensure 异步加载，还不支持 ES6 的 export 
// export default NotFound
module.exports = Lists;
